<template>
	<view class="search-container">
		<!-- 搜索头部 -->
		<view class="search-header" :style="{ paddingTop: statusBarHeight + 'px' }">
			<view class="search-bar">
				<view class="search-input-wrapper">
					<text class="search-icon">🔍</text>
					<input 
						ref="searchInput"
						class="search-input"
						type="text"
						v-model="searchKeyword"
						placeholder="搜索商品、品牌"
						confirm-type="search"
						@input="onSearchInput"
						@confirm="onSearchConfirm"
						@focus="onInputFocus"
					/>
					<text v-if="searchKeyword" class="clear-icon" @click="clearSearch">✕</text>
				</view>
				<text class="cancel-btn" @click="goBack">取消</text>
			</view>
			
			<!-- 搜索建议 -->
			<view v-if="showSuggestions && suggestions.length > 0" class="suggestions-dropdown">
				<view 
					v-for="(suggestion, index) in suggestions" 
					:key="index"
					class="suggestion-item"
					@click="selectSuggestion(suggestion)"
				>
					<text class="suggestion-icon">🔍</text>
					<text class="suggestion-text">{{ suggestion }}</text>
				</view>
			</view>
		</view>
		
		<!-- 主要内容区域 -->
		<view class="main-content">
			<!-- 搜索前状态 -->
			<view v-if="!hasSearched && !isSearching" class="before-search">
				<!-- 历史搜索 -->
				<view v-if="searchHistory.length > 0" class="history-section">
					<view class="section-header">
						<text class="section-title">搜索历史</text>
						<text class="clear-history" @click="clearHistory">清除</text>
					</view>
					<view class="history-tags">
						<view 
							v-for="(item, index) in searchHistory" 
							:key="index"
							class="history-tag"
							@click="searchKeywordAction(item)"
						>
							<text class="tag-text">{{ item }}</text>
							<text class="remove-tag" @click.stop="removeHistoryItem(index)">✕</text>
						</view>
					</view>
				</view>
				
				<!-- 热门搜索 -->
				<view class="hot-search-section">
					<view class="section-header">
						<text class="section-title">热门搜索</text>
					</view>
					
					<!-- 加载状态 -->
					<view v-if="isLoadingHot" class="loading-hot">
						<text class="loading-text">加载中...</text>
					</view>
					
					<!-- 热门搜索标签 -->
					<view v-else class="hot-tags">
						<view 
							v-for="(item, index) in hotKeywords" 
							:key="index"
							class="hot-tag"
							:class="{ 'hot-tag-highlight': index < 3 }"
							@click="searchKeywordAction(item.keyword)"
						>
							<text v-if="index < 3" class="rank-number">{{ index + 1 }}</text>
							<text class="tag-text">{{ item.keyword }}</text>
							<text v-if="item.isHot" class="hot-icon">🔥</text>
						</view>
					</view>
				</view>
				
				<!-- 分类推荐 -->
				<view class="category-recommend">
					<view class="section-header">
						<text class="section-title">分类推荐</text>
					</view>
					<view class="category-grid">
						<view 
							v-for="(category, index) in recommendCategories" 
							:key="index"
							class="category-item"
							@click="searchCategory(category)"
						>
							<view class="category-icon">
								<image :src="category.icon" mode="aspectFit" />
							</view>
							<view class="category-info">
								<text class="category-name">{{ category.name }}</text>
								<text v-if="category.productCount" class="category-count">{{ category.productCount }}个商品</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 搜索中状态 -->
			<view v-if="isSearching" class="searching-state">
				<ob-loading :visible="true" text="搜索中..." />
			</view>
			
			<!-- 搜索结果 -->
			<view v-if="hasSearched && !isSearching" class="search-results">
				<!-- 搜索结果头部 -->
				<view class="results-header">
					<text class="results-count">找到 {{ totalCount }} 个相关商品</text>
					<view class="sort-filter">
						<text class="sort-btn" @click="showSortModal">排序</text>
						<text class="filter-btn" @click="showFilterModal">筛选</text>
					</view>
				</view>
				
				<!-- 空结果 -->
				<view v-if="searchResults.length === 0" class="empty-results">
					<ob-empty 
						:image="'/static/images/empty-search.png'"
						title="未找到相关商品"
						description="试试其他关键词或者浏览推荐商品"
					/>
					
					<!-- 推荐商品 -->
					<view class="recommend-products">
						<text class="recommend-title">为您推荐</text>
						<view class="product-grid">
							<view 
								v-for="(product, index) in recommendProducts" 
								:key="index"
								class="product-item"
								@click="goToProduct(product)"
							>
								<ob-product-card :product="product" />
							</view>
						</view>
					</view>
				</view>
				
				<!-- 搜索结果列表 -->
				<view v-else class="results-list">
					<view 
						v-for="(product, index) in searchResults" 
						:key="index"
						class="result-item"
						@click="goToProduct(product)"
					>
						<ob-product-card :product="product" layout="horizontal" />
					</view>
					
					<!-- 加载更多 -->
					<view v-if="hasMoreResults" class="load-more" @click="loadMoreResults">
						<text class="load-more-text">{{ isLoadingMore ? '加载中...' : '加载更多' }}</text>
					</view>
					
					<!-- 没有更多 -->
					<view v-else-if="searchResults.length > 0" class="no-more">
						<text class="no-more-text">已显示全部结果</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 排序筛选弹窗 -->
		<view v-if="showSort" class="sort-modal" @click="showSort = false">
			<view class="sort-content" @click.stop>
				<view class="modal-header">
					<text class="modal-title">排序方式</text>
					<text class="modal-close" @click="showSort = false">✕</text>
				</view>
				<view class="sort-options">
					<view 
						v-for="(option, index) in sortOptions" 
						:key="index"
						class="sort-option"
						:class="{ 'option-selected': currentSort === option.value }"
						@click="selectSort(option.value)"
					>
						<text class="option-text">{{ option.label }}</text>
						<text v-if="currentSort === option.value" class="option-check">✓</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref, computed, inject, onMounted, nextTick } from 'vue'
import { getPlatform, debounce } from '../../utils/common.js'
import productApi from '../../api/product.js'
import indexApi from '../../api/indexApi.js'

// 全局状态
const store = inject('$store')

// 响应式数据
const searchKeyword = ref('')
const suggestions = ref([])
const showSuggestions = ref(false)
const searchHistory = ref([])
const hotKeywords = ref([])
const recommendCategories = ref([])
const searchResults = ref([])
const recommendProducts = ref([])
const hasSearched = ref(false)
const isSearching = ref(false)
const isLoadingHot = ref(false)
const isLoadingMore = ref(false)
const hasMoreResults = ref(false)
const totalCount = ref(0)
const currentPage = ref(1)
const currentSort = ref('default')
const showSort = ref(false)

// 获取系统信息
const platform = getPlatform()
const statusBarHeight = platform.statusBarHeight || 0

// 排序选项
const sortOptions = ref([
	{ label: '综合排序', value: 'default' },
	{ label: '价格从低到高', value: 'price_asc' },
	{ label: '价格从高到低', value: 'price_desc' },
	{ label: '销量从高到低', value: 'sales_desc' },
	{ label: '最新上架', value: 'time_desc' }
])

// 页面加载
onMounted(() => {
	loadSearchHistory()
	loadHotKeywords()
	loadRecommendCategories()
	
	// 自动聚焦输入框
	nextTick(() => {
		// 在实际uniapp中可能需要使用不同的方式来聚焦
	})
})

// 加载搜索历史
const loadSearchHistory = () => {
	try {
		const history = uni.getStorageSync('searchHistory') || []
		searchHistory.value = history.slice(0, 10) // 最多显示10条
	} catch (error) {
		console.error('加载搜索历史失败:', error)
	}
}

// 加载热门搜索
const loadHotKeywords = async () => {
	try {
		isLoadingHot.value = true
		const response = await indexApi.getHotSearchKeywords()
		console.log('热门搜索API响应:', response)
		
		// 处理API返回的数据结构
		const keywords = response?.hotKeywords || response || []
		hotKeywords.value = keywords.map((keyword, index) => ({
			keyword: typeof keyword === 'string' ? keyword : keyword.keyword || keyword,
			count: keyword.count || Math.floor(Math.random() * 1000) + 100,
			isHot: index < 3 // 前3个标记为热门
		}))
		
		// 如果没有数据，设置默认数据
		if (hotKeywords.value.length === 0) {
			hotKeywords.value = [
				{ keyword: '船舶发动机', count: 1250, isHot: true },
				{ keyword: '船用机油', count: 980, isHot: true },
				{ keyword: '导航设备', count: 756, isHot: true },
				{ keyword: '船舶配件', count: 632, isHot: false },
				{ keyword: '船用电器', count: 589, isHot: false },
				{ keyword: '救生设备', count: 467, isHot: false },
				{ keyword: '船用涂料', count: 398, isHot: false },
				{ keyword: '通讯设备', count: 289, isHot: false }
			]
		}
	} catch (error) {
		console.error('加载热门搜索失败:', error)
		// 设置默认数据
		hotKeywords.value = [
			{ keyword: '船舶发动机', count: 1250, isHot: true },
			{ keyword: '船用机油', count: 980, isHot: true },
			{ keyword: '导航设备', count: 756, isHot: true },
			{ keyword: '船舶配件', count: 632, isHot: false },
			{ keyword: '船用电器', count: 589, isHot: false },
			{ keyword: '救生设备', count: 467, isHot: false },
			{ keyword: '船用涂料', count: 398, isHot: false },
			{ keyword: '通讯设备', count: 289, isHot: false }
		]
	} finally {
		isLoadingHot.value = false
	}
}

// 加载推荐分类
const loadRecommendCategories = async () => {
	try {
		const response = await indexApi.getRecommendCategories(8)
		console.log('推荐分类API响应:', response)
		
		// 处理API返回的数据结构
		const categories = response?.categories || response || []
		recommendCategories.value = categories.map(category => ({
			id: category.level2Id || category.id,
			name: category.name,
			icon: category.icon || '/static/icons/default.png',
			productCount: category.productCount || 0,
			sampleProducts: category.sampleProducts || []
		}))
		
		// 如果没有数据，设置默认数据
		if (recommendCategories.value.length === 0) {
			recommendCategories.value = [
				{ id: 1, name: '船舶发动机', icon: '/static/icons/engine.png', productCount: 156 },
				{ id: 2, name: '导航设备', icon: '/static/icons/navigation.png', productCount: 89 },
				{ id: 3, name: '船用机油', icon: '/static/icons/oil.png', productCount: 234 },
				{ id: 4, name: '救生设备', icon: '/static/icons/safety.png', productCount: 67 },
				{ id: 5, name: '船用电器', icon: '/static/icons/electronics.png', productCount: 123 },
				{ id: 6, name: '船舶配件', icon: '/static/icons/parts.png', productCount: 345 },
				{ id: 7, name: '通讯设备', icon: '/static/icons/communication.png', productCount: 78 },
				{ id: 8, name: '船用涂料', icon: '/static/icons/paint.png', productCount: 145 }
			]
		}
	} catch (error) {
		console.error('加载推荐分类失败:', error)
		// 设置默认数据
		recommendCategories.value = [
			{ id: 1, name: '船舶发动机', icon: '/static/icons/engine.png', productCount: 156 },
			{ id: 2, name: '导航设备', icon: '/static/icons/navigation.png', productCount: 89 },
			{ id: 3, name: '船用机油', icon: '/static/icons/oil.png', productCount: 234 },
			{ id: 4, name: '救生设备', icon: '/static/icons/safety.png', productCount: 67 },
			{ id: 5, name: '船用电器', icon: '/static/icons/electronics.png', productCount: 123 },
			{ id: 6, name: '船舶配件', icon: '/static/icons/parts.png', productCount: 345 },
			{ id: 7, name: '通讯设备', icon: '/static/icons/communication.png', productCount: 78 },
			{ id: 8, name: '船用涂料', icon: '/static/icons/paint.png', productCount: 145 }
		]
	}
}

// 搜索输入处理
const onSearchInput = debounce(async () => {
	if (searchKeyword.value.trim()) {
		// 获取搜索建议
		await loadSuggestions()
		showSuggestions.value = true
	} else {
		suggestions.value = []
		showSuggestions.value = false
	}
}, 300)

// 输入框聚焦
const onInputFocus = () => {
	if (searchKeyword.value.trim()) {
		showSuggestions.value = true
	}
}

// 加载搜索建议
const loadSuggestions = async () => {
	try {
		// 这里应该调用API获取搜索建议
		// const response = await productApi.getSearchSuggestions(searchKeyword.value)
		// suggestions.value = response || []
		
		// 临时使用模拟数据
		const mockSuggestions = [
			`${searchKeyword.value}相关商品`,
			`${searchKeyword.value}品牌`,
			`${searchKeyword.value}套装`
		]
		suggestions.value = mockSuggestions
	} catch (error) {
		console.error('加载搜索建议失败:', error)
	}
}

// 选择搜索建议
const selectSuggestion = (suggestion) => {
	searchKeyword.value = suggestion
	showSuggestions.value = false
	performSearch()
}

// 搜索确认
const onSearchConfirm = () => {
	showSuggestions.value = false
	if (searchKeyword.value.trim()) {
		performSearch()
	}
}

// 搜索关键词
const searchKeywordAction = (keyword) => {
	searchKeyword.value = keyword
	performSearch()
}

// 执行搜索
const performSearch = async () => {
	if (!searchKeyword.value.trim()) return
	
	try {
		isSearching.value = true
		hasSearched.value = true
		currentPage.value = 1
		
		// 添加到搜索历史
		addToSearchHistory(searchKeyword.value.trim())
		
		// 调用搜索API
		const params = {
			keyword: searchKeyword.value.trim(),
			page: 1,
			size: 20,
			sortBy: currentSort.value === 'default' ? 'score_desc' : currentSort.value
		}
		
		console.log('执行搜索，参数:', params)
		const response = await indexApi.searchProducts(params)
		console.log('搜索API响应:', response)
		
		// 处理API返回的数据结构
		const products = response?.products || response?.data?.products || response || []
		searchResults.value = products.map(product => ({
			id: product.productId || product.id,
			name: product.name,
			price: product.price,
			originalPrice: product.originalPrice,
			image: product.coverImage || product.image,
			sales: product.salesCount || product.sales,
			rating: product.avgScore || product.rating
		}))
		
		totalCount.value = response?.totalCount || response?.total || products.length
		hasMoreResults.value = response?.hasNext || false
		
		// 如果没有结果，加载推荐商品
		if (searchResults.value.length === 0) {
			loadRecommendProducts()
		}
		
	} catch (error) {
		console.error('搜索失败:', error)
		uni.showToast({
			title: '搜索失败，请重试',
			icon: 'none'
		})
	} finally {
		isSearching.value = false
	}
}

// 加载更多结果
const loadMoreResults = async () => {
	if (isLoadingMore.value || !hasMoreResults.value) return
	
	try {
		isLoadingMore.value = true
		currentPage.value++
		
		const params = {
			keyword: searchKeyword.value.trim(),
			page: currentPage.value,
			size: 20,
			sortBy: currentSort.value === 'default' ? 'score_desc' : currentSort.value
		}
		
		const response = await indexApi.searchProducts(params)
		
		// 处理API返回的数据结构
		const products = response?.products || response?.data?.products || response || []
		const mappedProducts = products.map(product => ({
			id: product.productId || product.id,
			name: product.name,
			price: product.price,
			originalPrice: product.originalPrice,
			image: product.coverImage || product.image,
			sales: product.salesCount || product.sales,
			rating: product.avgScore || product.rating
		}))
		
		searchResults.value.push(...mappedProducts)
		hasMoreResults.value = response?.hasNext || false
		
	} catch (error) {
		console.error('加载更多失败:', error)
		uni.showToast({
			title: '加载失败',
			icon: 'none'
		})
	} finally {
		isLoadingMore.value = false
	}
}

// 加载推荐商品
const loadRecommendProducts = async () => {
	try {
		const response = await productApi.getRecommendProducts({ limit: 6 })
		recommendProducts.value = response.list || []
	} catch (error) {
		console.error('加载推荐商品失败:', error)
	}
}

// 添加到搜索历史
const addToSearchHistory = (keyword) => {
	try {
		// 去重并添加到开头
		const history = searchHistory.value.filter(item => item !== keyword)
		history.unshift(keyword)
		
		// 最多保存20条历史
		const newHistory = history.slice(0, 20)
		searchHistory.value = newHistory
		
		// 保存到本地存储
		uni.setStorageSync('searchHistory', newHistory)
	} catch (error) {
		console.error('保存搜索历史失败:', error)
	}
}

// 移除历史记录项
const removeHistoryItem = (index) => {
	searchHistory.value.splice(index, 1)
	uni.setStorageSync('searchHistory', searchHistory.value)
}

// 清除搜索历史
const clearHistory = () => {
	uni.showModal({
		title: '确认清除',
		content: '确定要清除所有搜索历史吗？',
		success: (res) => {
			if (res.confirm) {
				searchHistory.value = []
				uni.removeStorageSync('searchHistory')
			}
		}
	})
}

// 清除搜索
const clearSearch = () => {
	searchKeyword.value = ''
	suggestions.value = []
	showSuggestions.value = false
}

// 选择排序
const selectSort = (sortValue) => {
	currentSort.value = sortValue
	showSort.value = false
	
	// 重新搜索
	if (hasSearched.value) {
		performSearch()
	}
}

// 搜索分类
const searchCategory = async (category) => {
	try {
		// 可以选择直接跳转到分类页面
		// uni.navigateTo({
		// 	url: `/pages/category/index?categoryId=${category.id}`
		// })
		
		// 或者在当前页面显示分类商品
		searchKeyword.value = category.name
		isSearching.value = true
		hasSearched.value = true
		currentPage.value = 1
		
		// 添加到搜索历史
		addToSearchHistory(category.name)
		
		// 调用分类商品API
		const params = {
			page: 1,
			size: 20,
			sortBy: 'score_desc'
		}
		
		console.log('搜索分类商品，分类ID:', category.id, '参数:', params)
		const response = await indexApi.getProductsByCategory(category.id, params)
		console.log('分类商品API响应:', response)
		
		// 处理API返回的数据结构
		const products = response?.products || response?.data?.products || response || []
		searchResults.value = products.map(product => ({
			id: product.productId || product.id,
			name: product.name,
			price: product.price,
			originalPrice: product.originalPrice,
			image: product.coverImage || product.image,
			sales: product.salesCount || product.sales,
			rating: product.avgScore || product.rating
		}))
		
		totalCount.value = response?.totalCount || response?.total || products.length
		hasMoreResults.value = response?.hasNext || false
		
		// 如果没有结果，加载推荐商品
		if (searchResults.value.length === 0) {
			loadRecommendProducts()
		}
		
	} catch (error) {
		console.error('分类搜索失败:', error)
		uni.showToast({
			title: '搜索失败，请重试',
			icon: 'none'
		})
	} finally {
		isSearching.value = false
	}
}

// 页面跳转
const goToProduct = (product) => {
	uni.navigateTo({
		url: `/pages/product/detail?productId=${product.id}`
	})
}

const goBack = () => {
	uni.navigateBack({
		fail: () => {
			uni.switchTab({
				url: '/pages/index/index'
			})
		}
	})
}

const showFilterModal = () => {
	uni.showToast({
		title: '筛选功能开发中',
		icon: 'none'
	})
}
</script>

<style lang="scss" scoped>
.search-container {
	min-height: 100vh;
	background: #F5F5F5;
}

.search-header {
	background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
	border-bottom: 1px solid rgba(108, 117, 125, 0.12);
	position: relative;
	z-index: 1000;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.search-bar {
	padding: 12px 15px;
	display: flex;
	align-items: center;
	gap: 12px;
}

.search-input-wrapper {
	flex: 1;
	background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
	border-radius: 25px;
	padding: 0 20px;
	display: flex;
	align-items: center;
	gap: 12px;
	height: 50px;
	box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
	border: 1px solid rgba(108, 117, 125, 0.15);
	transition: all 0.3s ease;

	&:focus-within {
		box-shadow: 0 4px 25px rgba(59, 130, 246, 0.15);
		border-color: rgba(59, 130, 246, 0.3);
		transform: translateY(-1px);
	}
}

.search-icon {
	font-size: 18px;
	color: #6c757d;
	text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

.search-input {
	flex: 1;
	font-size: 16px;
	color: #333333;
	background: transparent;
	border: none;
	outline: none;
	font-weight: 400;
	letter-spacing: 0.3px;

	&::placeholder {
		color: #8e9aaf;
	}
}

.clear-icon {
	font-size: 18px;
	color: #6c757d;
	padding: 8px;
	border-radius: 50%;
	transition: all 0.2s ease;

	&:active {
		background: rgba(108, 117, 125, 0.1);
		transform: scale(0.9);
	}
}

.cancel-btn {
	font-size: 16px;
	color: var(--primary-color);
	padding: 8px 12px;
	border-radius: 20px;
	font-weight: 500;
	transition: all 0.2s ease;
	letter-spacing: 0.3px;

	&:active {
		background: rgba(59, 130, 246, 0.1);
		transform: scale(0.95);
	}
}

.suggestions-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: #FFFFFF;
	border-bottom: 1px solid #F0F0F0;
	max-height: 300px;
	overflow-y: auto;
}

.suggestion-item {
	padding: 15px;
	display: flex;
	align-items: center;
	gap: 10px;
	border-bottom: 1px solid #F8F9FA;
	
	&:last-child {
		border-bottom: none;
	}
	
	&:active {
		background: #F8F9FA;
	}
}

.suggestion-icon {
	font-size: 14px;
	color: #999999;
}

.suggestion-text {
	font-size: 16px;
	color: #333333;
}

.main-content {
	flex: 1;
	padding: 15px;
}

.before-search {
	
}

.history-section,
.hot-search-section,
.category-recommend {
	background: #FFFFFF;
	border-radius: 12px;
	padding: 20px;
	margin-bottom: 15px;
}

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
}

.section-title {
	font-size: 18px;
	font-weight: 600;
	color: #333333;
}

.clear-history {
	font-size: 14px;
	color: #999999;
}

.history-tags,
.hot-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.history-tag {
	background: #F8F9FA;
	border-radius: 20px;
	padding: 8px 12px;
	display: flex;
	align-items: center;
	gap: 6px;
	
	.tag-text {
		font-size: 14px;
		color: #666666;
	}
	
	.remove-tag {
		font-size: 12px;
		color: #999999;
	}
}

.hot-tag {
	background: #F8F9FA;
	border-radius: 20px;
	padding: 8px 12px;
	display: flex;
	align-items: center;
	gap: 6px;
	
	&.hot-tag-highlight {
		background: linear-gradient(45deg, #ff6b6b, #feca57);
		
		.tag-text {
			color: #FFFFFF;
		}
		
		.rank-number {
			color: #FFFFFF;
		}
	}
	
	.rank-number {
		font-size: 12px;
		font-weight: bold;
		color: var(--primary-color);
		min-width: 16px;
		text-align: center;
	}
	
	.tag-text {
		font-size: 14px;
		color: #666666;
	}
	
	.hot-icon {
		font-size: 12px;
	}
}

.loading-hot {
	text-align: center;
	padding: 20px;
	
	.loading-text {
		font-size: 14px;
		color: #999999;
	}
}

.category-grid {
	display: flex;
	gap: 20px;
}

.category-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	
	.category-icon {
		width: 50px;
		height: 50px;
		border-radius: 25px;
		background: #F8F9FA;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-bottom: 8px;
		
		image {
			width: 30px;
			height: 30px;
		}
	}
	
	.category-info {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 2px;
	}
	
	.category-name {
		font-size: 12px;
		color: #666666;
		text-align: center;
	}
	
	.category-count {
		font-size: 10px;
		color: #999999;
		text-align: center;
	}
}

.searching-state {
	padding: 100px 0;
}

.search-results {
	
}

.results-header {
	background: #FFFFFF;
	border-radius: 12px;
	padding: 15px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 15px;
}

.results-count {
	font-size: 14px;
	color: #666666;
}

.sort-filter {
	display: flex;
	gap: 15px;
}

.sort-btn,
.filter-btn {
	font-size: 14px;
	color: var(--primary-color);
}

.empty-results {
	background: #FFFFFF;
	border-radius: 12px;
	padding: 30px 20px;
}

.recommend-products {
	margin-top: 30px;
}

.recommend-title {
	font-size: 16px;
	font-weight: 600;
	color: #333333;
	margin-bottom: 15px;
	display: block;
}

.product-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.product-item {
	width: calc(50% - 5px);
}

.results-list {
	
}

.result-item {
	background: #FFFFFF;
	border-radius: 12px;
	margin-bottom: 10px;
	overflow: hidden;
}

.load-more {
	text-align: center;
	padding: 20px;
	background: #FFFFFF;
	border-radius: 12px;
	margin-top: 10px;
	
	.load-more-text {
		font-size: 14px;
		color: var(--primary-color);
	}
}

.no-more {
	text-align: center;
	padding: 20px;
	
	.no-more-text {
		font-size: 14px;
		color: #999999;
	}
}

.sort-modal {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 2000;
	display: flex;
	align-items: flex-end;
}

.sort-content {
	background: #FFFFFF;
	border-radius: 20px 20px 0 0;
	width: 100%;
	max-height: 50%;
}

.modal-header {
	padding: 20px;
	border-bottom: 1px solid #F0F0F0;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.modal-title {
	font-size: 18px;
	font-weight: 600;
	color: #333333;
}

.modal-close {
	font-size: 20px;
	color: #999999;
}

.sort-options {
	padding: 10px 0;
}

.sort-option {
	padding: 15px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	
	&.option-selected {
		background: rgba(79, 172, 254, 0.1);
		
		.option-text {
			color: var(--primary-color);
		}
	}
	
	&:active {
		background: #F8F9FA;
	}
}

.option-text {
	font-size: 16px;
	color: #333333;
}

.option-check {
	font-size: 16px;
	color: var(--primary-color);
	font-weight: bold;
}
</style>